<template>
  <el-dialog
    title="附件"
    :visible.sync="dialogVisible"
    custom-class="custom-dialog"
    width="50%"
    :before-close="handleClose"
    @opened="initData"
  >
    <div class="top">
      <div class="dot"></div>
      <div class="imageWords">图片</div>
    </div>

    <!-- 图片展示部分 -->
    <div class="showImage">  
      <div
        class="showImageItem"
        v-for="(item, i) in imageDataArr"
        :key="i"
        @click="imageBig(item.imgurl)"
      >
        <img :src="item.imgurl" alt="" class="showImg" />
        <div class="showName">{{ item.name }}</div>
      </div>
    </div>

    <!-- 文件下载 -->
    <div class="fileDownload">
      <div class="dot"></div>
      <div class="imageWords">文件下载</div>
      <a
        class="fileName"
        v-for="item in fileArr"
        :key="item.fileName"
        :href="item.url"
        :download="item.fileName"
      >
        {{ item.fileName }}
      </a>
    </div>

    <el-dialog :visible.sync="dialogVisibles">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </el-dialog>
</template>
<script>
import { staticImgUrl } from "@/url.js";
export default {
  data() {
    return {
      // 图片的数组
      imageDataArr: [
        // { imgurl: require("@/assets/images/case/case5.png"), name: "image1" },
        // { imgurl: require("@/assets/images/case/case5.png"), name: "image2" },
      ],

      //   文件名
      fileArr: [
        // {
        //   fileName: "文件A",
        //   url: "",
        // },
      ],

      dialogImageUrl: "",
      dialogVisibles: false,

      // imageUrl: "http://192.168.1.34:8085",
    };
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    imageDate: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    handleClose() {
      this.$emit("closeDialog");
      //   this.clearData();
      // 关闭页面，清空图片列表
      this.imageDataArr = [];
      this.fileArr = [];
    },
    // 下载文件
    download(row) {
      console.log(row);
    },

    initData() {},

    // 图片放大
    imageBig(val) {
      this.dialogImageUrl = val;
      this.dialogVisibles = true;
    },
  },
  watch: {
    // 监听传过来的 imageDate
    imageDate() {
      if (this.imageDate.length > 0) {
        this.imageDate.forEach((item) => {
          if (
            item.suffix == ".png" ||
            item.suffix == ".jpg" ||
            item.suffix == ".jpeg"
          ) {
            this.imageDataArr = [];
            // 图片
            this.imageDate.forEach((item) => {
              this.imageDataArr.push({
                imgurl:
                  item.url.indexOf("http") == 0
                    ? item.url
                    : staticImgUrl + item.url,
                name: item.name,
              });
            });
          } else {
            // 文件
            this.fileArr.push({
              fileName: item.name,
              url: item.url,
            });
          }
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.top {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  .dot {
    width: 12px;
    height: 12px;
    background: #138aef;
    border-radius: 50%;
    margin-right: 7px;
  }
  .imageWords {
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #545455;
  }
}

// 图片展示部分
.showImage {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  .showImageItem {
    height: 145px;
    width: 24%;
    margin-right: 1.3%;
    margin-bottom: 20px;
    position: relative;
    .showImg {
      width: 100%;
      height: 100%;
    }
    .showName {
      width: 100%;
      height: 26px;
      background: #000000;
      opacity: 0.4;
      position: absolute;
      bottom: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #ffffff;
    }
  }
}
.showImage .showImageItem:nth-child(4n) {
  margin-right: 0px;
}

// 文件下载
.fileDownload {
  display: flex;
  align-items: center;
  height: 80px;
  .dot {
    width: 12px;
    height: 12px;
    background: #138aef;
    border-radius: 50%;
    margin-right: 7px;
  }
  .imageWords {
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #545455;
  }
  .fileName {
    height: 38px;
    background: linear-gradient(256deg, #1189ef, #5baff7);
    box-shadow: 0px 4px 9px 1px rgba(43, 153, 255, 0.33);
    border-radius: 4px;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #ffffff;
    margin-left: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: 128px;
  }
}
</style>
